<template>
  <div class="root-component">
    <h3>根组件（提供数据）</h3>
    <p>主题颜色：{{ theme }}</p>
    <button @click="toggleTheme">切换主题</button>
    <ChildComponent />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import ChildComponent from './ProvideInjectChild.vue'

// 创建响应式的 provide 数据
const theme = ref('light')

// 提供主题数据和切换方法
provide('theme', {
  theme,
  toggleTheme: () => {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }
})
</script>

<style scoped>
.root-component {
  padding: 15px;
  background-color: #e0e0e0;
  margin: 10px;
  border-radius: 5px;
}
</style>
